<template>
	<view class="main" v-if="shops.length>0" :style="{ top: top, left: left}">
		<uni-grid :column="3" >
			<uni-grid-item v-for="(item, index) in shops" :index="index" :key="index">
				<view class="image-box"  :class="{ 'active': item.shopType === activeItem }"  @longpress="longpress(item.shopType)"  @click.stop="handleItemClick(index)">
					<image class="image" :src="item.url" mode="aspectFill" @error="handleImageError(item.shopType)"></image>
					<view class="grid-text-box"><text class="grid-text">{{ item.shopType }}</text></view>
					
					<uni-badge :text="item.count" type="primary" class="badge"></uni-badge>
				</view>
			</uni-grid-item>
	
		</uni-grid>
	</view>
</template>

<script>
import { shopIcon } from '../utils/shopIcon';

export default {
	name: 'ShopBar',
	props: {
		top: {
			type: String,
			default: '0rpx'
		},
		left: {
			type: String,
			default: '0rpx'
		}
	},
	computed: {
		shops() {
			const validMarkers = this.markers.filter(
				(item) =>
					item &&
					item.keytag !== undefined &&
					item.keytag !== null &&
					item.id !== this.storeData.user?.userId && // 容错
					item.keytag !== '普通用户' &&
					item.keytag !== '收藏点'
			);

			const newshopObj = validMarkers.reduce((acc, item) => {
				const keytag = item.keytag;
				acc[keytag] = (acc[keytag] || 0) + 1;
				return acc;
			}, {});

			const newShopArr = [];
			for (const key of Object.keys(newshopObj)) {
				const iconInfo = shopIcon(key) || { url: this.defaultIcon, color: '#666' }; // 兜底
				newShopArr.push({
					shopType: key,
					count: newshopObj[key],
					url: iconInfo.url,
					color: iconInfo.color
				});
			}

			return newShopArr;
		},

		storeData() {
			return this.$store.state.msg || {}; // 容错
		},
		markers() {
			return this.storeData.markers || []; // 容错，避免undefined
		}
	},
	watch: {
		shops: {
			handler(newShops) {
			
				const newKeys = newShops.map((item) => item.shopType); // 正确获取shopType集合
				const oldActive = this.activeItem;
				if (oldActive && !newKeys.includes(oldActive)) {
					this.activeItem = '';
				}
				},
			deep: true,
			immediate: true
		}
	},
	data() {
		return {
			iconMap: {}, // 初始化
			defaultIcon: '/static/none.png',
			barWidth: 0,
			activeItem: '',
			windowWidth: 0,
	
		};
	},
	mounted() {
		const res = this.storeData?.systemInfo || {}; // 容错
		this.windowWidth = res.windowWidth || 375; // 默认值
		this.barWidth = (this.windowWidth - 40) / 3;
	},
	methods: {
		keyIsState(key) {
			return !!key && key === this.activeItem;
		},

		handleImageError(key) {
			this.iconMap[key] = this.defaultIcon;
	
		
		},
		handleItemClick(index) {
			console.log(index);
			const key = this.shops[index]?.shopType; // 通过索引拿到对应的shopType
			if (!key) return; // 容错：避免索引无效
			this.activeItem = key === this.activeItem ? '' : key.trim();
			uni.$emit('scale', 18);
			uni.$emit('keytags', key);
		},
		longpress(key) {
			const format = encodeURIComponent(JSON.stringify(this.markers));
			uni.navigateTo({
				url: `/pages/membersInfo/membersInfo?membersInfo=${format}&key=${key}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: fixed;
	z-index: 100; // 确保显示在顶层
	padding: 5rpx;
	width: 400rpx;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 3rpx;
}
.image-box {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center; // 居中显示
	padding: 10rpx;
	margin: 2rpx;
	background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
}
.active {
  background-color: rgba(0, 122, 255, 0.1); /* 选中背景色（淡蓝） */
  border: 2rpx solid #007aff; /* 选中边框（蓝色） */
}

/* 点击时的缩放动效（通过伪类 :active 实现） */
.image-box:active {
  transform: scale(0.95); /* 点击瞬间缩小到95% */
}
.image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 10rpx; // 圆形图标
	background: #f5f5f5; // 加载前占位背景
}
.grid-text-box{
	background-color: #55aa00;
	border-radius: 13rpx;
	width: 100rpx;
	height: 30rpx;
	justify-content: center;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.grid-text {
	margin-top: 8rpx;
	font-weight: 500;
	color: #fff;
	
	font-size: 24rpx; // 适配小字体
	white-space: nowrap;
	 transition: color 0.2s ease;
	 text-shadow: 0 0 2rpx #fff, 0 0 2rpx #fff;
}
.badge {
	position: absolute;
	right: 0;
	top: 0;
}

</style>
